<template>
    <div class="home">
        <div class="box">
            <div class="box-text-1">hello !</div>
            <div class="box-text-2">{{ titleText }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { HAGBTXXApi } from '@/apis'
    import { isPhone } from '@/utils/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
    } from '@element-plus/icons-vue'
    
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const { isLocked } = storeToRefs(store)
	const avatarImage = new URL('@/assets/img/avatar/avatar.png', import.meta.url).href
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
    const titleText: Ref<string> = ref('欢迎来到Vue Admin！')
    
</script>

<style lang="scss" scoped>
    // .home::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    .home {
        width: 100%;
        height: 100%;
        background: url('@/assets/img/bg/bg-2.png');
        background-size: 100% 100%;
        position: relative;
        background-color: #fff;
    }
    .box {
        background-color: rgba(255, 255, 255, 0.1);
        box-sizing: border-box;
        padding: 40px;
        border-radius: 10px;
        position: absolute;
        right: 300px;
        top: 300px;
        color: #fff;
        text-align: left;
        .box-text-1 {
            font-size: 40px;
            font-weight: bold;
            padding: 10px 0;
        }
        .box-text-2 {
            font-size: 26px;
            padding: 10px 0;

        }
    }
</style>